<%
  @doc = @share.shareable
  @user = @doc.repository&.user
  @repository = @doc.repository
%>

<% title_tag @doc.title %>

<div class="doc-page doc-share-page d-flex flex-wrap flex-lg-nowrap">
  <div class="doc-center flex-auto">
    <div class="doc-main">
      <h1 class="doc-title">
        <%= @doc.title %>
      </h1>
      <div class="doc-info mt-3 py-2 border-top">
        <span class="editors">
          <% @doc.editors.each do |user| %>
            <%= user_avatar_tag(user, style: :tiny) %>
          <% end %>
        </span>

        <% if @doc.last_editor %>
        <%= t(".Last edit by") %> <%= user_name_tag(@doc.last_editor) %> <%= t(".Last edit by at") %> <%= timeago @doc.body_updated_at %>
        <% else %>
          <%= t(".Created by") %> <%= user_name_tag(@doc.creator) %> <%= t(".Created by at") %> <%= timeago @doc.created_at %>
        <% end %>

        <% if can? :update, @doc %>
          <%= link_to icon_tag("pencil", label: t(".Edit")), edit_user_repository_doc_path(@user, @repository, @doc), class: "px-2 ml-1" %>
        <% end %>
      </div>
      <div class="markdown-body markdown-with-toc" data-turbolinks="false">
        <%= raw @doc.body_html %>
      </div>
      <div class="doc-reaction mt-5">
        <%= react_component "reactions/Index", {
          subjectType: "Doc",
          subjectId: @doc.id,
          reactions: @doc.reactions_as_json,
        } %>
      </div>

      <div class="doc-comments mt-3 clearfix">
        <%= react_component "comments/Index", {
          currentUser: current_user&.as_json(only: %i[id slug name avatar_url]),
          commentableType: "Doc",
          commentableId: @doc.id,
          watchStatus: @doc.watch_comment_status_by_user_id(current_user&.id),
          abilities: {
            update: can?(:update, @doc),
            destroy: can?(:destroy, @doc),
          },
        } %>
      </div>
    </div>
    </div>
    <div class="doc-body-toc" data-turbolinks="false">
  </div>
</div>
